<template>

			
			<uni-card :is-shadow="true">
				<!-- <uni-forms-item label="" >
					<uni-easyinput v-model="tableName" placeholder="请输入表单名称" />
				</uni-forms-item> -->
				<view v-for="(item,index) in tableList">
					
					<!-- 文本框 -->
					<uni-row class="demo-uni-row" v-if="item.type ==1" >
						<uni-col :span="4">
							<view style="margin-top: 8px;font-size: 16px;">{{item.name}}</view>
						
						</uni-col>
						<uni-col :span="20">
							<uni-easyinput v-model="item.content" placeholder="请输入内容" />
						</uni-col>
						
					</uni-row>
					<!-- 单选框-->
					<uni-row class="demo-uni-row" v-if="item.type ==2" >
						<uni-col :span="4">
							<view style="font-size: 16px;">{{item.name}}</view>
						
						</uni-col>
						<uni-col :span="20">
							<uni-data-checkbox  v-model="item.content"  :localdata="item.optionList"></uni-data-checkbox>
						</uni-col>
						
					</uni-row>
					<!-- 复选框-->
					<uni-row class="demo-uni-row" v-if="item.type ==3" >
						<uni-col :span="4">
							<view style="font-size: 16px;">{{item.name}}</view>
						
						</uni-col>
						<uni-col :span="20">
							
							<uni-data-checkbox multiple v-model="item.content" :localdata="item.optionList"></uni-data-checkbox>
						</uni-col>
						
					</uni-row>
					<!-- 下拉列表-->
					<uni-row class="demo-uni-row" v-if="item.type ==4" >
						<uni-col :span="4">
							<view style="margin-top: 8px;font-size: 16px;">{{item.name}}</view>
						
						</uni-col>
						<uni-col :span="20">
							
							<uni-data-select
							       v-model="item.content"
							     :localdata="item.optionList"
							    
							    ></uni-data-select>
						</uni-col>
						
					</uni-row>
					<!-- 图片-->
					<uni-row class="demo-uni-row" v-if="item.type ==5" >
						<uni-col :span="4">
							<view style="font-size: 16px;">{{item.name}}</view>
						
						</uni-col>
						<uni-col :span="20">
							
							<button class="mini-btn" type="primary" size="mini" @click="selectImages()">选择图片</button>
							
							<!-- <uni-file-picker limit="8" v-model="item.content" title="最多选择8张图片"></uni-file-picker> -->
						</uni-col>
						
					</uni-row>
					<uni-row class="demo-uni-row" v-if="item.type ==5" >
						<uni-col :span="4">
							&nbsp;
						</uni-col>
						<uni-col :span="20">
						
							<uni-grid :column="3" :show-border="false" :square="false" >
								<uni-grid-item v-for="(item ,index) in imagesList" :index="index" :key="index">
									
									<view class="grid-item-box" @click="showImage(imageUrl+item)">
									
										<image class="image" :src="imageUrl+item" mode="scaleToFill"  />
										
									</view>
								</uni-grid-item>
							</uni-grid>
						</uni-col>
						
					</uni-row>
					<!-- 视频-->
					<uni-row class="demo-uni-row" v-if="item.type ==6" >
						<uni-col :span="4">
							<view style="font-size: 16px;">{{item.name}}</view>
						
						</uni-col>
						<uni-col :span="20">
							<button class="mini-btn" type="primary" size="mini" @click="selectVideo()">选择视频</button>
							<!-- <uni-file-picker limit="8" v-model="item.content"  file-mediatype="video" title="最多选择8个视频"></uni-file-picker> -->
						</uni-col>
						
					</uni-row>
					<uni-row class="demo-uni-row" v-if="item.type ==6" >
						<uni-col :span="4">
							&nbsp;
						</uni-col>
						<uni-col :span="20">
						
							<uni-grid :column="1" :show-border="false" :square="false" >
								<uni-grid-item v-for="(item ,index) in vedioList" :index="index" :key="index">
									
									<view class="grid-item-box" @click="showVideo(imageUrl+item)">
									
										<video  :src="imageUrl+item"   ></video>
									</view>
								</uni-grid-item>
							</uni-grid>
						</uni-col>
						
					</uni-row>
					      
					           
					<!-- 日期-->
					<uni-row class="demo-uni-row" v-if="item.type ==7" >
						<uni-col :span="4">
							<view style="margin-top: 8px;font-size: 16px;">{{item.name}}</view>
						
						</uni-col>
						<uni-col :span="20">
							
							<uni-datetime-picker type="date" v-model="item.content"  :clear-icon="false"  />
						</uni-col>
					
					</uni-row>
				</view>
			</uni-card>
			
			
			
			
		
		<uni-card :is-shadow="false">
			<uni-forms-item label="" >
				<button type="primary" @click="submit()">使用</button>
			</uni-forms-item>
		</uni-card>
	
		
		
</template>

<script>
	import http from '@/store/http.js'
	import constant from '@/store/constant.js'
	
	export default {
			data() {
				return {
					
					imageUrl:constant.baseImageUrl,
					templateId:0,
					tableList:[
						// {
						// 	type:0,
						// 	name:"文本框测试用的递增",
						// 	content:"",
						// 	optionList:[
						// 		{
						// 			text: '男',
						// 			value: 0
						// 		}, {
						// 			text: '女',
						// 			value: 1
						// 		}
						// 	]
						// }
					],
					imagesList:[
					// 	"2024-06-26/85a2bf8e4e0f421685db977c71c40832.jpg","2024-06-26/85a2bf8e4e0f421685db977c71c40832.jpg"
					// ,"2024-06-26/85a2bf8e4e0f421685db977c71c40832.jpg","2024-06-26/85a2bf8e4e0f421685db977c71c40832.jpg"
						],
					vedioList:[
						// "2024-06-26/87c9c49fd91a87a7ca6ac93532d9dd9a.mp4",
						// "2024-06-26/87c9c49fd91a87a7ca6ac93532d9dd9a.mp4",
						// "2024-06-26/87c9c49fd91a87a7ca6ac93532d9dd9a.mp4",
						// "2024-06-26/87c9c49fd91a87a7ca6ac93532d9dd9a.mp4"
						],
					
					
					
					
					
				}
			},
			onLoad(option) {
				
				
				
			},
			onShow(){
				var templateId=uni.getStorageSync('templateId');
				this.$data.templateId=templateId;
				var self=this;
				http.get("/api/template/getTemplateInfo?templateId="+templateId,(result)=>{
					
					if(result.status){
						var fieldArray=result.data.field;
						var length=fieldArray.length;
						var tableList=[];
						
						for(var i=0;i<length;i++){
							var field=fieldArray[i];
							
							
							var item= {
									id:field.id,
									type:field.type,
									name:field.name,
									// value:null,
									content:"",
									optionList:[]
								}
							switch(field.type){
								//文本和时间
								case 1:
								case 7:
									item.content="";
									break;
								//单选和下拉
								case 2:
								case 4:
									item.content=0;
									break;
								//多选
								case 3:
									item.content=[];
									break;
								//图片
								case 5:
									
									break;
								//视频
								case 6:
									
									break;
							
							}
							if(field.option!=undefined){
								for(var j=0;j<field.option.length;j++){
									var optionItem={
										id:field.option[j].id,
										text: field.option[j].name,
										value: field.option[j].sort
									}
									item.optionList.push(optionItem);
								}
							}	
							tableList.push(item);
						}
						
						
						self.$data.tableList=tableList;
					}else{
						self.showContentToast(result.msg);
					}
					
				})
			},
			watch: {
			
			},
			mounted() {
			
			},
	
			methods:{
				
				showContentToast(title){
					uni.showToast({
					  title: title,
					  icon: "none"
					})
				},
				submit(){
					var self=this;
					var data={templateId:this.$data.templateId};
					http.post("/api/template/useTemplate",data,(result)=>{
						
						if(result.status){
							self.showContentToast("模板使用成功,一秒后跳转");
							setTimeout(() => {
								uni.redirectTo({
									url:"/pages/template/templateList"
								})
							}, 1000);
							
						}else{
							self.showContentToast(result.msg);
						}
					});
					
				
					
				},
			}
		}
</script>

<style>
.example-body {
	background-color: #fff;
	padding: 10px;
}

.example {
	padding: 15px;
	background-color: #fff;
}
.button-sp-area{
	margin: 0 auto;
	width: 60%;
}
.popup-content {
		@include flex;
		align-items: center;
		justify-content: center;
		padding: 15px;
		height: 50px;
		
	}

	.popup-height {
		@include height;
		width: 200px;
	}
	.demo-uni-row{
		padding-bottom: 20px;
	}
.grid-item-box {
					flex: 1;
					
					/* #ifndef APP-NVUE */
					display: flex;
					/* #endif */
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding: 5px 0;
				}
				
			.image {
					width: 50px;
					height: 50px;
				}
				.popup-content {
						@include flex;
						align-items: center;
						justify-content: center;
						padding: 15px;
						height: 500px;
						width:500px;
						background-color: #fff;
						text-align: center;
					}
</style>